<template>
	<div class="card " @click="$u.route({url:'pagesC/goods/goodsDetails',params:{id:shop.goods_id}})">
		<u-image :src="shop.goods_img" style="flex-shrink: 0;margin-right:10upx" width="80" height="80"
			border-radius="10"></u-image>
		<div>
			<p class="shopTitle ">{{shop.goods_name}}</p>
			<div style="margin-right:10upx">
				<span class="price "> ¥{{shop.shop_price}}</span>
			</div>
			<u-icon name="shopping-cart" class="shopCart" color="#fa3e3f" size="28"></u-icon>
		</div>
	</div>
</template>

<script>
	export default {
		name: "miniShopCard",
		props: {
			shop: {
				type: Object,
				default: {
					shop_logo: '',
					shop_title: '',
					originPrice: '',
					discountPrice: '',
				}
			}
		},
		mounted() {
			this.shop_logo = this.STATICURL + 'images/video_cover/20201125/1b0ea81593272b96a73e4acc617bc0f8.png'
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 300upx;
		position: relative;
		background-color: #fff;
		border-radius: 10upx;
		padding: 8upx 4upx;
		display: flex;
		align-items: center;

		.price {
			color: red;
			font-weight: 600;
			margin-right: 10upx;
			font-size: 24upx
		}

		.shopTitle {
			width: 100%;
			font-size: 24upx;
			margin-right: 10upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}

	.shopCart {
		position: absolute;
		bottom: 8upx;
		right: 8upx;
	}

	.shopTitle {}
</style>
